<template>
<div class="top">
  <ul>
    <!-- <router-link tag="li" to="/city-list">
    北京 <i class="iconfont icon-zhankai"></i>
    </router-link> -->

    <router-link tag="li" active-class="active" to="/perform/concert">
     <img data-v-16671d40="" src="https://img.meituan.net/kylisean/b132e8d30be554486b8c909c7d16f7c15282.png" class="head-icon">
     <p>演唱会</p>
  </router-link>
    <router-link tag="li" active-class="active" to="/perform/opera">
    <img data-v-16671d40="" src="https://img.meituan.net/kylisean/5cc92a5a6bb19618f7d2b31433a2a2f24956.png" class="head-icon">
    <p>歌剧话剧</p>
     </router-link>
    <router-link tag="li" active-class="active" to="/perform/display">
    <img data-v-16671d40="" src="https://img.meituan.net/kylisean/2b3d5971c31e8a39e181bd07f3c42d824737.png" class="head-icon">
    <p>休闲展览</p>
    </router-link>
    <router-link tag="li" active-class="active" to="/perform/crosstalk">
    <img data-v-16671d40="" src="https://img.meituan.net/kylisean/8d6764a0cee35332f44976f84b188c444767.png" class="head-icon">
    <p>戏曲相声</p>
    </router-link>
    <router-link tag="li" active-class="active" to="/perform/family">
    <img data-v-16671d40="" src="https://img.meituan.net/kylisean/cce8a904f6489abeff04f9d9555dd77f4052.png" class="head-icon">
    <p>亲子/艺术</p>
    </router-link> 
    
    <!-- <!-- <router-link tag="li" to="/search">
    <i class="iconfont icon-search"></i>
    </router-link> -->
  </ul>
  <!-- <van-grid :border="false" :column-num="5" style="font-size:5px;">
  <van-grid-item  to="/perform/concert"  >
  
    <van-image data-v-16671d40="" src="https://img.meituan.net/kylisean/b132e8d30be554486b8c909c7d16f7c15282.png" class="head-icon" />
    演唱会
  </van-grid-item>
  <van-grid-item  to="/perform/opera">
 
    <van-image  data-v-16671d40="" src="https://img.meituan.net/kylisean/5cc92a5a6bb19618f7d2b31433a2a2f24956.png" class="head-icon"/>
    话剧歌剧
  </van-grid-item >
  <van-grid-item to="/perform/display">
 
    <van-image data-v-16671d40="" src="https://img.meituan.net/kylisean/2b3d5971c31e8a39e181bd07f3c42d824737.png" class="head-icon" />
    休闲展览
  </van-grid-item>
  <van-grid-item to="/perform/crosstalk">
  
    <van-image data-v-16671d40="" src="https://img.meituan.net/kylisean/8d6764a0cee35332f44976f84b188c444767.png" class="head-icon"/>
    喜剧相声
  </van-grid-item>
  <van-grid-item to="/perform/family">
  
    <van-image data-v-16671d40="" src="https://img.meituan.net/kylisean/cce8a904f6489abeff04f9d9555dd77f4052.png" class="head-icon" />
    亲子艺术
  </van-grid-item>
</van-grid> -->
</div>
</template>

<script>
export default {
 data () { 
return {
    
}
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
// van-grid-item{
//     font-size: 5px;
// }

.active{
    
  font-size: 17px;
      color: #333;
      font-weight: 700;
      border-bottom: 3px solid red;
}
.top{
  
  position: fixed;
  left: 0;
  top: 50px;

  z-index: 20;
//   height: 40px;
  width: 100%;
//   line-height: 40px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  text-align: center;
  font-size: 15px;
  img{
      width: 60px;
      height: 60px;
  }
  ul{
    display: flex;
    li{
      flex: 1;
    //   height: ;
      .icon-zhankai{
        font-size: 8px;
        margin-left: -5px;
      }
    }
  }
}
</style>
